<template>
   <view class="head">
    <view   @click="goBack">
      <image
        src="../static/images/BackIcon.png"
        mode="scaleToFill"

      />
      </view>
      <view class="title">{{title}}</view>
    </view>
</template>

<script setup>
defineProps({
  title: {
   type: String,
   default: ''
  }
})
//返回上一层
const goBack = () => {
   console.log('✅ 返回按钮被点击了！')
  uni.navigateBack();
};
</script>

<style lang="scss" scoped>

.head {
  width: 100%;
  height: 155rpx;
  background:#5756b3;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  position: relative; // 确保内部元素相对于此容器定位

  image {
    width: 100rpx;
    height: 100rpx;
    margin-right: 20rpx; // 增加图标的右边距以确保与标题之间有适当的间距
  }

  .title {
    color: aliceblue;
    font-size: 50rpx;
    flex: 1;
    text-align: center;
    position: absolute; // 让标题相对于父级容器绝对定位
    left: 50%; // 将标题的左边缘移动到父容器的水平中心
    transform: translateX(-50%); // 使用transform属性将标题向左移动自身宽度的一半，实现真正意义上的水平居中
  }
}
</style>